<template>
  <div id="app">

    <el-container style="height: 100%">
      <el-container style="height: 100%">
        <el-header>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <h3 style="float: left">{{ item.video_vname }}</h3>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                    <span style="float: left"><i class="el-icon-data-board"
                                                 style="color: #1800ec;transform: rotate(180deg)"></i>{{
                        item.video_vv
                      }}</span>
                <span style="float: left"><i class="el-icon-chat-line-round"
                                             style="color: #1800ec"></i>{{ item.video_like }}</span>
                <span style="float: left"><i class="el-icon-time" style="color: #1800ec"></i>{{ item.video_timestamp }}</span>
                <span style="float: left"><i class="el-icon-warning-outline" style="color: #ff0707"></i>未经作者授权禁止转载</span>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
              </div>
            </el-col>
          </el-row>


        </el-header>
        <el-main>

          <!--          <div class="grid-content bg-purple">-->
          <video width="100%" height="100%" controls>
            <source :src="isHttpUrl(item.video_url)?item.video_url:'http://'+ip+':'+port+item.video_url"
                    type="video/mp4">
          </video>
          <!--          </div>-->

        </el-main>
        <el-footer hight="200px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span style="float: left;margin-top: 10px"><i class="el-icon-view" style="color: #1800ec"></i>10人正在看，已装填20条弹幕</span>

              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-switch
                    v-model="value1"
                    active-text="打开弹窗"
                    inactive-text="关闭弹窗" style="margin-top: 15px;">
                </el-switch>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <span @click="like"><i class="el-icon-star-on" style="color: #de6401;margin-top: 15px;"
                                       :style="{color:color}">点赞</i></span>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <span><i class="el-icon-share" style="color: #de6401;margin-top: 15px;">分享</i></span>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                <span><i class="el-icon-s-flag" style="color: #de6401;margin-top: 15px;">收藏</i></span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                  <span class="searchInput" style="float: right">
                    <el-input v-model="inputSearch" type="text" placeholder="请输入发布内容"
                              style="display: inline-block;width: 160px"></el-input>
                    <el-button type="primary">发布</el-button>
                  </span>
              </div>
            </el-col>
          </el-row>


        </el-footer>
      </el-container>
      <el-aside width="240px">
        <div>
          <div style="margin-top: 15px">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <img src="../assets/img/HealLogo.png" style="width: 50px;height: 50px">
                </div>
              </el-col>
              <el-col :span="18">
                <div class="grid-content bg-purple">
                  <a style="float: left">{{ item.video_uid }}</a><br>
                  <a style="float: left;font-size: small">我有一个梦想</a>
                </div>
              </el-col>
            </el-row>

          </div>
          <el-button type="primary" style="padding: 10px;margin: 10px"><i class="el-icon-circle-plus-outline"
                                                                          style="color: bisque"></i>关注up主
          </el-button>
        </div>


        <el-row :gutter="20">
          <el-col :span="22" :offset="1">
            <div></div>
            <template>
              <el-table
                  :data="items"
                  style="width: 100%;"
                  :header-cell-style="{'padding-left':'30px'}"
                  :cell-style="{'padding-left':'30px'}"
                  highlight-current-row
                  height="300">
                <!--                <el-table-column-->
                <!--                    type="index"-->
                <!--                    :index="indexMethod">-->
                <!--                </el-table-column>-->
                <el-table-column
                    prop="video_vname"
                    label="视频名称"
                    width="">
                  <template slot-scope="scope">
                    <el-button @click="linkToOtherVideo(scope.row)"><i class="el-icon-paperclip"></i>
                      <span style="margin-left: 10px">{{ scope.row.video_vname }}</span></el-button>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                    prop="date"-->
                <!--                    label="发布时间">-->
                <!--                </el-table-column>-->
              </el-table>
            </template>
          </el-col>
        </el-row>

        <div style="height: 20px"></div>

        <el-col :span="22" :offset="1">
          <div class="grid-content bg-purple" style="color: #de6401">
            <div class="block">
              <span class="demonstration" style="color: #6a806f;font-size: large">更多推荐</span>
              <el-carousel height="200px">
                <el-carousel-item v-for="item in imgUrls" :key="item">
                  <a>{{ item.name }}</a>
                  <el-image :src="item.image"></el-image>

                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>


      </el-aside>
    </el-container>
  </div>

</template>

<script>
import img1 from "@/assets/img/HealLogo.png";
import img2 from "@/assets/img/HealLogo.png";
import img3 from "@/assets/img/HealLogo.png";

export default {
  name: "PageVideo",
  data() {
    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,

      color: '#de6401',
      item: this.$route.query.item,
      items: this.$route.query.items,
      value1: true,
      inputSearch: '',
      tableData: [{
        vid: '01',
        name: '网上视频1',
        date: '2022-7-6'
      }, {
        vid: '02',
        name: '网上视频1',
        date: '2022-7-6'
      },],
      imgUrls: [
        {
          name: '',
          image: img1,
        },
        {
          name: '',
          image: img2,
        },
        {
          name: '',
          image: img3,
        },]
      // imgUrls: [img1,img2,img3],
    }
  },

  methods: {    // url格式验证
    isHttpUrl(url) {
      const reg_url = /https?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
      return reg_url.test(url)
    },

    linkToOtherVideo(item) {
      this.item = item
    },
    like() {
      var that = this;
      this.color = 'red';
      this.$http.get("http://" + that.ip + ":" + that.port + "/video/like?id=" + that.item.video_vid)
          .then(function (response) {
            console.log(response);
            that.$message({
              message: "赞+1",
              type: 'success'
            });
          }).catch(function (err) {
        console.log(err);
        that.$message.error(
            '网络错误点在失败');
      });
    },
  },


}
</script>


<style>
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  /* overflow: auto; */
  /* box-sizing: border-box; */
  /* padding: 20px; */
}
</style>
<style scoped>
/*@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");*/

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.el-header, .el-footer {
  background-color: rgb(173, 217, 210);
  color: #333;
  text-align: center;
  line-height: 0px;
}

.el-aside {
  background-color: rgb(188, 221, 222);
  color: #333;
  text-align: center;
  height: auto;
}

.el-main {
  background-color: #e2f2f8;
  color: #333;
  height: 500px;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.left {
  float: left;
}

span {
  padding: 5px;
}

searchInput {
  margin-left: 50px;
  float: right;
}

</style>
